<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>标题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!-- 引入 echarts.js -->
    <script src="${pageContext.request.contextPath}/echarts/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>

</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div>
    <div id="main" style="width: 700px;height:630px;display:inline-block"></div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    /*var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;*/
    var myChart = echarts.init(document.getElementById('main'));

    $.ajax({
        type:'post',
        ///store/selectCountGroup
        url:'${pageContext.request.contextPath}/store/selectCountGroup',
        dataType:'json',
        success:function (data) {
            myChart.hideLoading();//加载数据
            myChart.setOption({//渲染
                title: {
                    text: '2020年销售排行统计(单位：本)',
                    subtext: '线上平台销售',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '线上销售',
                        type: 'pie',
                        radius: '50%',
                        data:data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    })
</script>
</body>
</html>

